<template>
	<div id="search">
	  <div class="left">
         <div>
			 <p>
				<span class="fa fa-search"></span>
			</p>
		</div>
		<div class="first">
			<p>
				<span>电影/电视剧/综艺</span>
			</p>
		</div>
		<div class="lest">
			<ul>
				<li>
					<div class="picture">
						<img src="../../public/images/001.png" >
					</div>
					<div class="content">
						<p class="title">机械师2：复活</p>
						<p class=" font-color">剧情，喜剧，犯罪</p>					
						<p class="time font-color">2020-6-30</p>	
					</div>
					<div class="third">
						<span>8.9</span>
					</div>
				</li>
			</ul>	
		</div>
	  </div>
	</div>
</template>

<script>
	export default{
		name:'Search'
		}
</script>

<style scoped>
	.left div:first-child p{
		background: #F0F0F0;
		padding-left: 10px;
	}
	.fa{
		background: white;
		border: 1px solid #ebebeb;
		width: 95%;
		height: 36%;
		margin: 10px 10px 10px 0px;
		padding-left: 10px;
		display: inline-block;
        line-height: 30px;
		border-radius: 5px;
	}
	.first p{
		margin-top: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #EBEBEB;
	}
	.first p span{
		color: #999999;
		font-weight: bold;
		width: 140px;
		height: 30px;
		padding-left: 10px;
		display: inline-block;
		text-align: center;
		
	}
		
	img{
		width: 80px;
	}
	.lest div{
		float: left;
	}
	.picture{
		width: 15%;
		margin-bottom: 8px;
	}
	.content{
		width:58% ;
	}
	li{
		overflow: hidden;
		margin: 10px;
		border-bottom: 1px dashed #CCCCCC;
		
	}
	.title{
		font-size: 18px;
		font-weight: bold;
		
	}
	p{
		line-height: 25px;
	}
	
	.third{
		width: 15%;
		text-align: center;
		line-height: 30px;
		font-size: 16px;
		font-weight: bold;
		color: #FF9900;
		
	}
	
	.font-color{
		color: #999999;
		font-weight: bold;
		font-size: 14px;
		margin-top: 1px;
	}
	.time{
		margin-top: 3px;
	}
	
	
	
	button{
		background: #E54847;
		width: 45px;
		height: 30px;
		border: none;
		color: white;
		border-radius: 5px;
	}
</style>
